<!--
 * @Author: Hugh Xie
 * @Date: 2022-03-01 12:41:40
 * @LastEditors: Hugh Xie
 * @LastEditTime: 2022-03-02 11:13:33
 * @FilePath: \frontend\src\component\readonly-form\src\index.vue
-->
<template>
  <a-card size="small" v-for="item in fields" :key="item.title" :title="item.title">
    <a-form>
      <template v-if="item.type === 'array'">
        <template v-if="data[item.fields] && data[item.fields].length > 0">
          <a-row v-for="(dataItem, dataIdx) in data[item.fields]" :key="dataIdx">
            <a-col
              v-for="childItem in item.childFields"
              :key="childItem.fields"
              :span="dataItem[childItem.field] == 'undefined' ? 0 : childItem.span">
              <a-form-item :label="childItem.title" class="mb-10">
                {{ handleFormEmptyData(dataItem[childItem.field]) }}
                <a-button v-if="childItem.eventTitle && dataItem.showBtn" class="ml-10" @click="childItem.event(dataItem)">{{childItem.eventTitle || ''}}</a-button>
              </a-form-item>
            </a-col>
          </a-row>
        </template>
        <template v-else>暂无{{ item.title }}数据</template>
      </template>

      <template v-else>
        <a-row>
          <a-col v-for="field in item.fields" :key="field.field" :span="field.span">
            <a-form-item :label="field.title" class="mb-10">
              {{ handleFormEmptyData(data[field.field]) }}
            </a-form-item>
          </a-col>
        </a-row>
      </template>
    </a-form>
  </a-card>
</template>

<script>
import { handleFormEmptyData } from '@/tools/filters'

export default {
  name: 'readonly-form',
  props: {
    fields: [Array],
    data: [Object]
  },
  setup() {
    return {
      handleFormEmptyData
    }
  }
}
</script>

<style scoped lang="scss">
  /deep/ .ant-form-item-control-input-content {
    word-wrap: break-word;
  }
</style>
